<template>
  <div style="padding: 10px 0px 0px 20px">
    <div class="ipt">
      <input type="file" name="file" class="upload__input" @change="uploadChange">
      <span style="padding-top: 10px;color: red;font-size: 13px">*大小请控制在{{Max_Size}}k之内！</span>
    </div>
    <!--        <div class="imgSrc">
              <img :src="echo" v-if="this.echo" height="120" width="100%"/>
              <img :src="picture" v-else height="120" width="100%"/>
            </div>-->
  </div>
</template>

<script>
  export default {
    props: {
      echo: String
    },
    data() {
      return {
        files: '',
        picture: '../../../static/img1/img1.png',
        Max_Size: '512',
      }
    },
    methods: {
      uploadChange(event) {
        this.file = event.target.files[0];
        this.imgPreview(this.file);
      },
      imgPreview(file) {
        let _this = this;
        // 看支持不支持FileReader
        if (!file || !window.FileReader) return;
        if (/^image/.test(file.type)) {
          // 创建一个reader
          var reader = new FileReader();
          // 将图片将转成 base64 格式
          reader.readAsDataURL(file);
          // 读取成功后的回调
          reader.onloadend = function () {
            _this.dataUrl = this.result;
            _this.$emit('returnValue', _this.dataUrl);
          };
        }
      },
    },
  }
</script>

<style scoped>
  .upload__input {
    display: block;
  }

  .upload__input::-webkit-file-upload-button {
    background: #efeeee;
    color: #333;
    border: 0;
    border-radius: 5px;
    font-size: 12px;
    padding: 10px 15px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1), 0 0 10px rgba(0, 0, 0, .12);
  }

  .ipt {
    display: inline-block;
  }

  .imgSrc {
    margin-top: 5px;
    width: 200px;
    display: inline-block;
  }

  .imgSrc img {
    padding: 5px;
    width: 200px;
  }
</style>
